<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./lottery.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./lib/index.css">
    <script src="./lib/vue.js"></script>
</head>


<body>
    <div id="app" class="page">
        <div class="header">
            <div class="period">
                <div class="pre">当前期数： {{periods}}</div>
                <div class="time" id="timer">开奖倒计时：{{time}}</div>
            </div>
            <div class="set_lottery ">
                <div class="el-title" v-cloak>
                    <el-button type="primary" @click="dialogFormVisible = true">设置开奖号码</el-button>
                </div>
                <el-dialog title="开奖号码设置" :visible.sync="dialogFormVisible" width="640px">
                    <div class="error" v-if="isShow" v-cloak>
                        <span class="el-icon-warning"> {{hint}}</span>
                        <i class="
                        el-icon-close" @click="close"></i>
                    </div>
                    <el-form class="el-form" :model="form">
                        <el-form-item label="期数选择:">
                            <el-input class="elipt" v-model="form.date" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="开奖号码:">
                            <el-input class="elipt" v-model="form.num" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="密码:" style="margin-left:28px">
                            <el-input class="elipt" v-model="form.password" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="handelCancel" v-cloak>取消</el-button>
                        <el-button type="primary" @click="handelConfirm" v-cloak>确定</el-button>
                    </div>
                </el-dialog>

            </div>
        </div>
        <div class="ipt-date">
            <div class="block">
                <span>查询时间：</span>
                <el-date-picker class="date-picker" v-model="value1" format="yyyy-MM-dd hh:mm: ss"
                    value-format="timestamp" type="daterange" range-separator="~" start-placeholder="开始日期" unlink-panels
                    end-placeholder="结束日期">
                </el-date-picker>
            </div>
            <div class="btns">
                <el-button class="search" @click="handelSearch">搜索</el-button>
                <el-button class="search" @click="handelReset">重置</el-button>
            </div>
        </div>
        <div class="tabs">
            <template>
                <el-table :data="tableData" border style="width: 622px">
                    <el-table-column prop="periods" label="已设置开奖号码的期数" width="311">
                    </el-table-column>
                    <el-table-column prop="number" label="开奖号码" width="310">
                    </el-table-column>
                </el-table>
            </template>

            <div class="laypage">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :page-size="pageSize" :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>

    </div>
    </div>
    <!-- 引入axios库 -->
    <script src="./lib//axios.min.js"></script>

    <!-- 引入组件库 -->
    <script src="./lib/index.js"></script>
    <script>

        var app = new Vue({
            el: '#app',
            data() {
                return {
                    value1: '',
                    currentPage: 1,
                    dialogTableVisible: false,
                    dialogFormVisible: false,
                    isShow: false,
                    hint: "",// 错误提示
                    total: 0,// 总条数
                    pageSize: 10,// 当前条数
                    pageIndex: 1,// 当前页数
                    form: {
                        date: "",
                        num: "",
                        password: ""
                    },
                    formLabelWidth: '220px',
                    tableData: [],
                    periods: "",// 当前期数
                    time: 66//  倒计时
                };
            },
            mounted() {
                this.getList()
                this.timer = setInterval(this.CountDown, 1000);

            },
            methods: {

                // 获取表单数据
                getList(start, end) {
                    axios.get(`http://admin.testcgldm.backwe.weigather.com/api/game/result?`, {
                        params: {
                            page: this.pageIndex,
                            offset: this.pageSize,
                            start_time: start,
                            end_time: end
                        }
                    })
                        .then(res => {
                            console.log(res.data);
                            if (res.data) {
                                let data = res.data.data
                                this.tableData = data
                                this.periods = res.data.periods
                                this.total = res.data.total
                                console.log(this.tableData);
                                this.humandate(res.data.open_time, res.data.close_time,)
                            }
                        })
                        .catch(error => {
                            console.log(error);
                        });

                },
                // 设置开奖号码
                setNumber() {
                    axios.post(`http://admin.testcgldm.backwe.weigather.com/api/game/result?periods=${this.form.date}&number=${this.form.num}&password=${this.form.password}`, {
                    }).then(res => {
                        console.log(res);
                        if (res.data.status) {
                            this.dialogFormVisible = false
                        } else {
                            this.hint = res.data.msg
                        }
                        console.log(res.data.status);
                    }).catch(error => {
                        console.log(error);
                    })
                },
                handelCancel() {
                    this.dialogFormVisible = false
                    this.isShow = false
                },
                handelConfirm() {
                    console.log(this.form);
                    if (!this.form.num || !this.form.date || !this.form.password) {
                        this.isShow = true
                        this.hint = "请输入完整信息"
                        return
                    }
                    this.setNumber()
                },
                handleSizeChange(val) {
                    this.pageSize = val
                    console.log(`每页 ${val} 条`);
                    this.getList()
                },
                handleCurrentChange(val) {
                    console.log(`当前页: ${val}`);
                    this.pageIndex = val + 1
                    this.getList()
                },
                handelSearch() {
                    let start_time = this.value1[0]
                    let end_time = this.value1[1]
                    this.getList(start_time, end_time)

                },
                handelReset() {
                    this.getList()
                },
                close() {
                    this.isShow = false
                },
                humandate(time1, time2) {
                    var s = time1 - time2;
                    if (s < 0) {
                        s = Math.abs(s);
                    }
                    else if (s > 60) {
                        this.timer = setInterval(this.CountDown, 1000);
                        return parseInt(s / 60) + '分钟';
                    } else {
                        console.log(s);
                        return parseInt(s) + '秒';
                    }

                },
                // secondToTimeStr(t) {
                //     if (!t) return;
                //     if (t < 60) return "00:" + ((i = t) < 10 ? "0" + i : i);
                //     if (t < 3600) return "" + ((a = parseInt(t / 60)) < 10 ? "0" + a : a) + ":" + ((i = t % 60) < 10 ? "0" + i : i);
                //     if (3600 <= t) {
                //         var a, i, e = parseInt(t / 3600);
                //         console.log(t);
                //         return (e < 10 ? "0" + e : e) + ":" + ((a = parseInt(t % 3600 / 60)) < 10 ? "0" + a : a) + ":" + ((i = t % 60) < 10 ? "0" + i : i);
                //     }
                // },
                CountDown() {
                    if (this.time >= 0) {
                        minutes = Math.floor(this.time / 60);
                        seconds = Math.floor(this.time % 60);
                        console.log(minutes);
                        console.log(seconds);
                        if (seconds < 10) {
                            seconds = "0" + seconds
                        }
                        msg = "开奖倒计时：" + "0" + minutes + ":" + seconds;
                        document.all["timer"].innerHTML = msg;
                        --this.time;
                        console.log(msg);
                    } else {
                        clearInterval(this.timer);
                        // console.log("时间到，结束!")
                        this.getList()
                    }
                }

            },
        })
    </script>
</body>

</html>